<template>
    <view class="bg-white uni-pa-4">
        <view>共{{ list.length }}条评论</view>
        <view class="flex uni-my-4">
            <image class="w-7 h-7 inline-block rounded-full uni-mr-4 flex-none" :src="avatar || imgUrl" mode="aspectFill">
            </image>
            <view @click="open(false)" class="w-full bg-gray-200 text-gray-600 rounded-xl text-xs uni-pa-3 uni-pl-6">
                说点什么吧，万一火了呢~</view>
        </view>
        <view v-for="item in list" :key="item.id" class="flex uni-my-4">
            <image @click="toAuthorPage(item.userId)" class="w-7 h-7 inline-block rounded-full flex-none uni-mr-4"
                :src="item.user.avatar || imgUrl" mode="aspectFill">
            </image>
            <view>
                <view @click="toAuthorPage(item.userId)" class="text-gray-400">{{ item.user.name }}</view>
                <view @click="open(item.user.name, item.user.id, item.id)">
                    <text>{{ item.content }}</text>
                </view>
                <view class="text-gray-400 text-xs">{{ item.createdAt }}</view>
                <view v-for="reply in item.replies" :key="reply.id" class="flex uni-my-4">
                    <image @click="toAuthorPage(reply.userId)" class="w-6 h-6 inline-block rounded-full flex-none uni-mr-4"
                        :src="reply.user.avatar || imgUrl" mode="aspectFill"></image>
                    <view>
                        <view @click="toAuthorPage(reply.userId)" class="text-gray-400">{{ reply.user.name }}</view>
                        <view>
                            <text>回复</text>
                            <text class="uni-pl-4">{{ reply.replyUser.name }}</text>
                            <text class="uni-px-4">:</text>
                            <text @click="open(reply.user.name, reply.user.id, item.id, reply.id)">{{ reply.content
                            }}</text>
                        </view>
                        <view class="text-gray-400 text-xs">{{ reply.createdAt }}</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="h-24 w-full text-center">没有更多了~</view>
        <uni-popup ref="popup" background-color="#fff">
            <view class="uni-py-4 uni-px-10 uni-pb-10">
                <input @confirm="submit" @blur="content = ''" focus confirm-type="send"
                    class="h-7 w-full bg-gray-200 rounded-xl text-xs uni-pa-3 uni-pl-6 box-border" v-model="content"
                    :placeholder="isReply ? `回复 @ ${replyUserName}` : '说点什么吧，万一火了呢~'" />
            </view>
        </uni-popup>
    </view>
</template>

<script>
import {
    httpsLoadComment,
    httpsComment,
    httpsReply,
    httpMsgDelete
} from '@/utils/api.js'
export default ({
    props: {
        avatar: '',
        noteId: { required: true },
        userId: { required: true },
    },
    data() {
        return {
            content: '',
            list: [],
            isReply: false,
            replyUserName: '',
            replyUserId: '',
            commentId: '',
            imgUrl: '../../static/img/user.jpg',
        }
    },
    created() {
        uni.$on('comment', () => {
            if (this.$refs.popup) {
                this.$refs.popup.open('bottom')
                this.replyUserName = ''
                this.replyUserId = ''
                this.commentId = ''
                this.isReply = false
            }
        })
    },
    mounted(){
        this.getNoteComment(this.noteId)
    },
    methods: {
        // 跳转作者页
        toAuthorPage(userId) {
            uni.navigateTo({
                url: `/pages/author/index?userId=${userId}`
            })
        },
        submit() {
            if (this.isReply) {
                this.postReply(this.userId, this.replyUserId, this.noteId, this.content, this.commentId)
            } else {
                this.postComment(this.userId, this.noteId, this.content)
            }
        },
        // 回复
        async postReply(userId, replyUserId, noteId, content, commentId) {
            const { code } = await await httpsReply(userId, replyUserId, noteId, content, commentId)
            if (code === 200) {
                this.getNoteComment(this.noteId)
                uni.showToast({
                    title: '回复成功',
                    icon: 'none'
                })
            }
        },
        // 评论
        async postComment(userId, noteId, content) {
            const { code } = await await httpsComment(userId, noteId, content)
            if (code === 200) {
                this.getNoteComment(this.noteId)
                uni.showToast({
                    title: '评论成功',
                    icon: 'none'
                })
            }
        },
        // 弹出输入框
        open(userName, replyUserId, commentId, replyId) {
            if (replyUserId === this.userId) {
                uni.showActionSheet({
                    itemList: ['删除'],
                    success: (res) => {
                        uni.showModal({
                            title: '提示',
                            content: '确认删除此评论',
                            success: async (res) => {
                                if (res.confirm) {
                                    const { code } = await httpMsgDelete({ commentId, replyId, userId: this.userId })
                                    if (code === 200) {
                                        uni.showToast({
                                            title: '删除成功',
                                            icon: 'none',
                                            complete: () => {
                                                this.getNoteComment(this.noteId)
                                            }
                                        })
                                    }
                                }
                            }
                        })
                    },
                    fail: function (res) {
                        console.log(res.errMsg)
                    }
                })
                return false
            }
            this.$refs.popup.open('bottom')
            if (userName) {
                this.replyUserName = userName
                this.replyUserId = replyUserId
                this.commentId = commentId
                this.isReply = true
            } else {
                this.isReply = false
            }
        },
        async getNoteComment(noteId) {
            const { code, data } = await httpsLoadComment(noteId)
            if (code == 200) {
                this.list = data
            }
        }
    },
    async toComment(userId, noteId, content) {
        const { code, data } = await httpsComment(userId, noteId, content)
        if (code === 200) {
            this.getNoteComment(this.noteId)
        }
    },
})
</script>

<style lang="scss" scoped></style>